<template>
  <div>
    <div style="margin-bottom: 20px;font-size: medium;font-weight: 900;">单位信息</div>

    <div class="search">
      <el-form label-width="90px" :inline="true" :model="form" ref="formRef">
        <el-form-item prop="id" label="单位名称">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位类别" prop="content">
          <el-select placeholder="请选择单位类别" v-model="queryInfo.query">
            <el-option label="选项1" value="content">
            </el-option>
            <el-option label="选项2" value="content">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="time" label="联系人">
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="time" label="联系方式">
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="time" label="信用代码">
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="time" label="备注">
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="check">
      <el-checkbox-group v-model="checkList">
        <div style="margin-bottom: 20px;font-size: medium;font-weight: 900;">认证管理
          <router-link to="/add">
            <el-checkbox label="2" style="margin-left: 30px;">企业认证</el-checkbox>
          </router-link>
          <el-checkbox label="1" style="margin-left: 30px;">个人认证</el-checkbox>
        </div>
      </el-checkbox-group>
    </div>

    <!-- 步骤条区域 -->
    <el-steps :active="1" simple :space="100">
      <el-step title="1.填写信息" icon="el-icon-edit"></el-step>
      <el-step title="2.等待审核" icon="el-icon-upload"></el-step>
      <el-step title="3.审核结果" icon="el-icon-picture"></el-step>
    </el-steps>

    <el-form label-width="86px" :inline="true" style="margin-top: 20px;">
      <el-form-item prop="time" label="姓名">
        <el-input v-model="form.time" autocomplete="off" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item prop="time" label="身份证号">
        <el-input v-model="form.time" autocomplete="off" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>

    <el-descriptions :column="3" size="mini" border>
      <el-descriptions-item label="上传凭证" labelStyle="">
        <!-- 上传营业执照 -->
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                   :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">

          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">上传身份证图片</div>
        </el-upload>
      </el-descriptions-item>
    </el-descriptions>
    <!--           <el-checkbox-group v-model="checkList">-->
    <!--              <el-checkbox label="3">长期</el-checkbox>-->
    <!--              <div class="label">若无营业期限，请选择长期</div>-->
    <!--          </el-checkbox-group> -->
    <div class="label">请您上传清晰、真实的身份证人像面照片及手持身份证照片(最多上传2张，每张最大10M)</div>

    <!-- 底部区域 -->
    <span slot="footer">
      <el-button type="primary" style="margin-top: 80px;margin-left:400px" @click="save">保 存</el-button>
      <router-link to="/notice"><el-button style="margin-left:30px">取 消</el-button></router-link>
    </span>


  </div>
</template>

<script>

export default {
  name: 'Add1',
  data() {
    return {
      tableData: [],
      checkList: ['1', '选中且禁用', '长期'],
      fileList: [],
      queryInfo: {
        query: '',
      },
      //当前的页数
      pageNum: 1,
      //当前每页显示多少条数据
      pageSize: 10,
      total: 0,
      title: null,
      form: {
        id: this.$route.query.param.id,
      },
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      rules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
        ],
        content: [
          {required: true, message: '请输入内容', trigger: 'blur'},
        ]
      },
      ids: [],
      noticeData: [],

    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleAdd() {   // 新增数据
      this.form = {}  // 新增数据的时候清空数据
      this.$router.push('/add');  //页面跳转到新增页面
    },
    handleEdit(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.$router.push('/edit')
    },
    loadNotice() {
      this.$request.get('/notice/selectAll').then(res => {
        if (res.code === '200') {
          this.noticeData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //监听pagesize改变的事件
    handleSizeChange(val) {
      this.pageSize = val
      this.loadNotice()
    },
    //监听页码值改变的事件
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request({
            url: this.form.id ? '/notice/update' : '/notice/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === '200') {  // 表示成功保存
              this.$message.success('保存成功')
              this.load(1)
              this.$router.push('/notice')      //跳转回主页面
            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
          })
        }
      })
    },
    del(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/notice/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    delBatch() {   // 批量删除
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/notice/delete/batch', {data: this.ids}).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/notice/selectPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.title,
        }
      }).then(res => {
        this.tableData = res.data?.list
        this.total = res.data?.total
      })
    },
    reset() {
      this.title = null
      this.queryInfo.query = null
      this.load(1)
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
  },
}
</script>

<style scoped>

.label {
  color: #409EFF;
  font-size: 12px;
}
</style>